<template>
    <!-- 滚动区域开始 -->
    <view class="container">
        <z-paging
            ref="paging"
            v-model="notifyList"
            :scroll-with-animation="true"
            :default-page-size="params.page_size"
            @query="handlerPullRefreshAndMore"
            @scroll="handleScroll"
        >
            <!-- 搜索区域开始 -->
            <template #top>
                <TridentSearch @search="handleSearch"/>
            </template>


            <!-- 列表区域开始 -->
            <view class="list-wrap">
                <view class="item-wrapper" v-for="(item, index) in notifyList" :key="index">
                    <!-- 标题区域开始 -->
                    <view class="title-box">
                        <view>{{ item.title }}</view>
                        <view class="read" v-if="item.is_read">已读</view>
                        <view class="unread" v-else @click="handleRead(item)">设置已读</view>
                    </view>
                    <!-- 标题区域结束 -->

                    <!-- 内容区域开始 -->
                    <view class="content-box">
                        <view class="content">{{ item.contents }}</view>
                        <image
                            :src="global.FILE_DOMAIN + item.image_url"
                            @click="handleShowImagePreview(global.FILE_DOMAIN + item.image_url)"
                        />
                    </view>
                    <!-- 内容区域结束 -->

                    <!-- 底部区域开始 -->
                    <view class="footer-box">{{ item.create_time }}</view>
                    <!-- 底部区域结束 -->
                </view>
            </view>
            <!-- 列表区域结束 -->

            <!-- 加载更多提示 -->
            <template #loadingMoreNoMore>
                <TridentNoMore :totalPage="totalPage" :page="params.page"/>
            </template>
        </z-paging>
    </view>
    <!-- 滚动区域结束 -->

    <!-- 返回顶部 -->
    <TridentBackTop @backTop="backTop" :isShowBackTop="isShowBackTop"/>
</template>

<script lang="ts" setup>
import { reqEditNotifyAPI, reqNotifyListAPI } from '@/apis/notify'
import { useUserStore } from '@/stores'
import type { Notify } from '@/types/notify'
import { inject, ref } from 'vue'

// --------------- 定义全局变量开始 ---------------
const paging = ref()

// 全局属性
const global: any = inject('global')

// 用户存储
const userStore = useUserStore()
// --------------- 定义全局变量结束 ---------------



// --------------- 处理设置已读开始 ---------------
const handleRead = async (item: Notify) => {
    await reqEditNotifyAPI({id: item.id, is_read: '1'})

    // 设置本地数据
    item.is_read = 1

    uni.showToast({
        title: '设置已读成功',
        duration: 1000
    })
}
// --------------- 处理设置已读结束 ---------------



// --------------- 定义搜索功能开始 ---------------
const handleSearch = async (e: any) => {
    params.value.title = e.keyword.value
    params.value.page = 1
    notifyList.value = []
    paging.value.reload()
}
// --------------- 定义搜索功能结束 ---------------


// ------------下拉刷新 + 加载更多开始 ------------
const handlerPullRefreshAndMore = async (pageNo: number, pageSize: number) => {
    params.value.page = pageNo
    await getNotifyList()
}
// ------------下拉刷新 + 加载更多结束 ------------



// --------------- 处理服务通知开始 ---------------
const params = ref({
    title: '',
    uid: userStore.profile.user?.uid,
    private_public: 1,
    page: 1,
    page_size: 10
})

// 通知列表
const notifyList = ref<Notify[]>([])

// 总条数
const total = ref<number>(0)

// 总页数
const totalPage = ref<number>(0)

// 获取通知列表
const getNotifyList = async () => {
  const result = await reqNotifyListAPI(params.value)
  total.value = result.data.total
  totalPage.value = result.data.total_page
  paging.value.complete(result.data.notifies)
}
// --------------- 处理服务通知结束 ---------------



// --------------- 返回顶部功能开始 ---------------
// 定义是否显示返回顶部
const isShowBackTop = ref(false)

// 返回顶部
const backTop = () => {
  paging.value.scrollToTop()
}

// 当滚动触发时，调用事件用于显示、隐藏返回顶部图标
const handleScroll = (e:any) => {
  isShowBackTop.value = e.detail.scrollTop > 300 ? true : false
}
// --------------- 返回顶部功能结束 ---------------



// --------------- 处理图片预览开始 ---------------
const handleShowImagePreview = (image_url: string) => {
    uni.previewImage({
		urls: [image_url]
	})
}
// --------------- 处理图片预览结束 ---------------
</script>

<style scoped lang="scss">
.container {
    .list-wrap {
        .item-wrapper {
            background-color: #fff;
            border-radius: 20rpx;
            margin: 30rpx 100rpx;
            padding: 30rpx;

            // 标题区域开始
            .title-box {
                display: flex;
                justify-content: space-between;
                padding-bottom: 15rpx;
                .read {
                    font-size: 24rpx;
                    color: #797878;
                }
                .unread {
                    background-color: $uni-color-primary;
                    color: #fff;
                    padding: 2rpx 10rpx;
                    border-radius: 4rpx;
                }
            }
            // 标题区域结束

            // 内容区域开始
            .content-box {
                border-top: 2rpx solid #e9e8e8;
                border-bottom: 2rpx solid #e9e8e8;
                padding: 15rpx 15rpx 25rpx 15rpx;
                .content {
                    padding-bottom: 10rpx;
                    color: #797878;
                    font-size: 24rpx;
                    line-height: 35rpx;
                }
                image {
                    width: 99%;
                    height: 300rpx;
                }
            }
            // 内容区域结束

            // 底部区域开始
            .footer-box {
                padding-top: 15rpx;
                display: flex;
                justify-content: flex-end;
                font-size: 24rpx;
                color: #a9a8a8;
            }
            // 底部区域结束
        }
    }
}
</style>